<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="图片轮播，图片切换，焦点图"/>
    <meta name="description" content="这是一个基于jquery的图片轮播效果演示页"/>
    <title>flexslider图片轮播、文字图片相结合滑动切换效果</title>
    <link rel="stylesheet" type="text/css" href="flexslider.css"/>
    <style type="text/css">
        .demo {
            width: 800px;
            margin: 20px auto
        }
    </style>
    <script src="jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="jquery.flexslider-min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 210,
                itemMargin: 5,
                asNavFor: '#slider'
            });

            $('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel"
            });
        });
    </script>
</head>

<body>
<div id="main">
    <div class="demo">
        <div id="slider" class="flexslider">
            <ul class="slides">
                <li><img src="images/sc1.jpg"/></li>
                <li><img src="images/sc2.jpg"/></li>
                <li><img src="images/sc3.jpg"/></li>
                <li><img src="images/sc4.jpg"/></li>
                <li><img src="images/sc5.jpg"/></li>
                <li><img src="images/sc6.jpg"/></li>
                <li><img src="images/sc1.jpg"/></li>
                <li><img src="images/sc2.jpg"/></li>
                <li><img src="images/sc3.jpg"/></li>
                <li><img src="images/sc4.jpg"/></li>
                <li><img src="images/sc5.jpg"/></li>
                <li><img src="images/sc6.jpg"/></li>
            </ul>
        </div>
        <div id="carousel" class="flexslider">
            <ul class="slides">
                <li><img src="images/sc1.jpg"/></li>
                <li><img src="images/sc2.jpg"/></li>
                <li><img src="images/sc3.jpg"/></li>
                <li><img src="images/sc4.jpg"/></li>
                <li><img src="images/sc5.jpg"/></li>
                <li><img src="images/sc6.jpg"/></li>
                <li><img src="images/sc1.jpg"/></li>
                <li><img src="images/sc2.jpg"/></li>
                <li><img src="images/sc3.jpg"/></li>
                <li><img src="images/sc4.jpg"/></li>
                <li><img src="images/sc5.jpg"/></li>
                <li><img src="images/sc6.jpg"/></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
